<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">系统管理</a>
        <a><cite>权限管理</cite></a>
        <a><cite>角色列表</cite></a>
    </div>
</div>

<div class="layui-fluid" id="role-content">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <div class="layui-btn-group test-table-operate-btn" style="margin-bottom: 10px;">
                                <button class="layui-btn ts-role-table-operate" data-type="add"><i class="layui-icon">
                                    &#xe654;</i>添加角色
                                </button>
                            </div>
                        </div>
                        <div class="layui-inline">
                            <div class="ts-table-btn" style="margin-bottom: 10px;">
                                <label class="layui-form-label">角色名称</label>
                                <div class="layui-inline">
                                    <input class="layui-input" type="text" name="roleName" id="roleName"
                                           autocomplete="off">
                                </div>
                                <button class="layui-btn ts-role-table-operate" data-type="reload">搜索</button>
                            </div>
                        </div>
                    </div>
                    <!-- </form>-->
                    <table class="layui-hide" id="ts-role-table" lay-filter="ts-role-table">
                    </table>
                    <script type="text/html" id="ts-role-table-operate-bar">
                        <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
                        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="setRoleMenu">角色菜单</a>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    layui.use(['admin', 'table', 'view', 'common', 'format', 'xtree', 'form'], function () {
        var table = layui.table;
        var admin = layui.admin;
        var basePath = layui.common.basePath;
        var xtree = layui.xtree;
        var form = layui.form;
        var $ = layui.$;
        //初始化列表数据
        table.render({
            elem: '#ts-role-table'
            , url: basePath + '/system/tsRole/findTsRolePage.do'
            , where: {
                access_token: layui.data('layuiAdmin').access_token
            }
            , height: 'full-100'
            , cellMinWidth: 80
            , page: true
            , limit: 10
            , cols: [[
                {field: 'roleId', checkbox: true, fixed: true}
                , {field: 'roleName', title: '角色名称', width: 200, sort: true, fixed: 'left'}
                , {field: 'roleCode', title: '角色编码', width: 150, sort: true}
                , {field: 'deptName', title: '所属部门', width: 150, sort: true}
                , {
                    field: 'roleType', title: '角色类型', width: 100, sort: true, templet: function (d) {
                        var roleTypeStr = '管理员';
                        if (d.roleType != 1) {
                            roleTypeStr = '普通角色';
                        }
                        return '<span>' + roleTypeStr + '</span>';
                    }
                }
                , {
                    field: 'status', title: '状态', width: 80, templet: function (d) {
                        var statusStr = '有效';
                        if (d.status != '0') {
                            statusStr = '无效'
                        }
                        return '<span>' + statusStr + '</span>'
                    }
                }
                , {field: 'roleDesc', title: '角色描述', width: 250}
                , {
                    field: 'createTime', title: '创建时间', width: 180, templet: function (d) {
                        return layui.format.UnixToDate(d.createTime / 1000, true);
                    }
                }
                , {field: 'creator', title: '创建人', width: 100}
                , {
                    field: 'modifyTime', title: '修改时间', width: 180, templet: function (d) {
                        return layui.format.UnixToDate(d.modifyTime / 1000, true);
                    }
                }
                , {field: 'modifyer', title: '修改人', width: 100}
                , {width: 300, align: 'center', fixed: 'right', toolbar: '#ts-role-table-operate-bar'}
            ]]
            , page: true
            , height: 500
        });


        /**
         * 列表数据查询方法
         */
        var $ = layui.$, active = {
            reload: function () {
                var roleName = $('#roleName').val();
                //执行重载
                table.reload('ts-role-table', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                        // 新增搜索条件 ，进行搜索
                        roleName: roleName
                    }
                });
            }
            , add: function () {
                location.hash = '/role/add';
            }
            , imp: function () {
                layer.msg('导入用户 研发中');
            },
            exp: function () {
                layer.msg('导出用户 研发中');
            }
        };
        //高级查询方法
        $('.ts-role-table-operate').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        /**
         * 监听表格选中事件
         * */
        table.on('checkbox(ts-role-table)', function (obj) {
            console.log(obj)
        });

        //监听工具条
        table.on('tool(ts-role-table)', function (obj) {
            var data = obj.data;
            if (obj.event === 'detail') {
                location.hash = "/role/detail/roleId=" + data.roleId;
            } else if (obj.event === 'del') {
                layer.confirm('菜单删除后不可恢复！', function (index) {
                    layer.close(index);
                    var index_ajax = layer.load(2);
                    admin.req({
                        url: basePath + 'system/tsRole/delTsroleById.do?roleId=' + data.roleId //实际使用请改成服务端真实接口
                        , type: 'get'
                        , done: function (res) {
                            layer.close(index_ajax);
                            if (res.code == 0) {
                                layer.msg(res.msg, {
                                    offset: '15px'
                                    , icon: 1
                                    , time: 1000
                                }, function () {
                                    active['reload'] ? active['reload'].call(this) : '';
                                });
                            } else {
                                layer.msg(res.msg, {
                                    offset: '15px'
                                    , icon: 2
                                    , time: 1000
                                }, function () {
                                });
                                return;
                            }
                        }, success: function (res) {
                            layer.close(index_ajax);
                            console.log(res)
                        }, error: function (res) {
                            layer.close(index_ajax);
                            console.log(res)
                        }
                    });
                });
            } else if (obj.event === 'edit') {
                location.hash = "/role/edit/roleId=" + data.roleId;
            } else if (obj.event === 'setRoleMenu') {
                layer.open({
                    type: 1,
                    area: ['420px', '400px'],
                    title: '配置角色菜单',
                    scrollbar: true,
                    btn: ['确定', '取消'],
                    content: '<form id="tree_form" class="layui-form"><div id="xtree3" style="width:400px;overflow:auto;padding: 10px 0 25px 5px;"></div></form>', //注意，如果str是object，那么需要字符拼接。
                    yes: function (index, layero) {
                        var checkedList = xtree3.GetAllChecked();
                        var checkedMenuIdList = new Array();
                        $.each(checkedList, function (index, item) {
                            checkedMenuIdList.push(item.defaultValue);
                        });
                        submitTsRoleMenu(layer, index, admin, data.roleId, checkedMenuIdList.join(','));
                    },
                    btn2: function (index) {
                        layer.close(index);
                    },
                    cancel: function () {

                    }
                });

                var param = 'access_token=' + layui.data('layuiAdmin').access_token + '&roleId=' + data.roleId;
                var xtree3 = new xtree({
                    elem: 'xtree3'                  //(必填) 放置xtree的容器，样式参照 .xtree_contianer
                    , form: form                    //(必填) layui 的 from
                    , isopen: true
                    , data: basePath + 'system/tsRoleMenu/findRoleMenuTreeByRoleId.do?' + param //(必填) 数据接口，需要返回以上结构的json字符串
                });
            }
        });

        // 设置角色菜单
        function submitTsRoleMenu(layer, index_ajax, admin, roleId, checkedMenuIdList) {
            admin.req({
                url: basePath + 'system/tsRoleMenu/add.do',
                type: 'post',
                data: {
                    access_token: layui.data('layuiAdmin').access_token,
                    roleId: roleId,
                    menuIdList: checkedMenuIdList
                },
                done: function (res) {
                    layer.close(index_ajax);
                    if (res.code == 0) {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 1
                            , time: 1000
                        });
                    } else {
                        layer.msg(res.msg, {
                            offset: '15px'
                            , icon: 2
                            , time: 1000
                        }, function () {
                        });
                        return;
                    }
                }, success: function (res) {
                    layer.close(index_ajax);
                    console.log(res)
                }, error: function (res) {
                    layer.close(index_ajax);
                    console.log(res)
                }
            });
        }

    });
</script>